<script lang="ts" setup name="Count">
    import { ref } from 'vue';
    import { useCountStore } from '@/store/count';

    const countStore = useCountStore();
    // console.log(countStore.sum.value);   // 这里不用.value来拆包
    // 下面两种方式都能拿到state中的数据
    // console.log(countStore.sum);
    // console.log(countStore.$state.sum);

    // data
    let n = ref(1);     // 用户选择的数字

    // methods
    function add() {
    }

    function minus() {
    }
</script>

<template>
    <div class="count">
        <h2>当前求和为：{{ countStore.sum }}</h2>
        <!-- v-model.number会将收集到的东西 尽可能的 转换成number -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>

<style scoped>
    .count {
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    .count button {
        margin: 0 5px;
        width: 50px;
    }
    .count select {
        width: 40px;
    }
</style>